<template>
  <div>
    <div class="root-info-pc">
      <div class="user-info">
        <div style="cursor: pointer;" @click="toBlogUser">
          <avatar :size="45" :src="detail.userImage"/>
        </div>
        <div>
          <div class="user-name">{{detail.userName}}</div>
          <div class="user-code-year-box">
            <img class="code-year-img" src="@/assets/img/pig1.gif">
            <span class="code-year">{{detail.codeYear}}</span>
          </div>
        </div>
      </div>

      <div class="blog-info">
        <div class="info-item">
          <div class="info-title">访问：</div>
          <div class="info-value">{{detail.blogInfoReadNum || 0}}</div>
        </div>
        <div class="info-item">
          <div class="info-title">文章：</div>
          <div class="info-value">{{detail.blogNum || 0}}</div>
        </div>
        <div class="info-item">
          <div class="info-title">收藏：</div>
          <div class="info-value">{{detail.blogLikeNum || 0}}</div>
        </div>
        <div class="info-item">
          <div class="info-title">关注：</div>
          <div class="info-value">{{detail.focusNum || 0}}</div>
        </div>
      </div>

      <div class="focus-btn" v-if="!isRootBlog && detail">
        <favate-btn v-if="detail.focusId" text="取消关注" @click="cancelFocus"/>
        <favate-btn v-if="!detail.focusId" text="关注博主" @click="addFocus"/>
      </div>
    </div>

    <div class="root-info-mobile">
      <div class="user-info">
        <div @click="toBlogUser">
          <avatar :size="45" :src="detail.userImage"/>
        </div>
        <div class="user-name-box">
          <div class="user-name-top">
            <div class="user-name">{{detail.userName}}</div>
            <div class="focus-btn" v-if="!isRootBlog && detail">
              <favate-btn v-if="detail.focusId" text="取消关注" @click="cancelFocus"/>
              <favate-btn v-if="!detail.focusId" text="关注博主" @click="addFocus"/>
            </div>
          </div>
          
          <div class="blog-info">
            <div class="info-item">
              <div class="info-title">访问：</div>
              <div class="info-value">{{detail.blogReadNum || 0}}</div>
            </div>
            <div class="info-item">
              <div class="info-title">文章：</div>
              <div class="info-value">{{detail.blogNum || 0}}</div>
            </div>
            <div class="info-item">
              <div class="info-title">关注：</div>
              <div class="info-value">{{detail.focusNum || 0}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar.vue'
import FavateBtn from '@/components/FavateBtn.vue'
import Api from "@/utils/api.js";

export default {
  props: ["userInfo", "userId", "detail"], 

  components:{
    Avatar,
    FavateBtn
  },

  computed:{
    isRootBlog(){
      return this.userInfo && this.userInfo.userId && this.userInfo.userId === this.detail.blogUserId;
    },
  },

  methods:{
    addFocus(){
      this.$axios.post(Api.BLOG_FOCUS_ADD, { userId: this.detail.blogUserId})
      .then( res =>{
        this.detail.focusId = res
        this.detail.focusNum = this.detail.focusNum + 1
        this.$message.success("关注成功！");})
      .catch(res =>{this.$message.warning(res.message);})
    },

    cancelFocus(){
      this.$axios.post(Api.BLOG_FOCUS_CANCEL, { userId: this.detail.blogUserId})
      .then( _ =>{ 
        this.detail.focusId = ''
        this.detail.focusNum = this.detail.focusNum - 1
        this.$message.success("已取消关注！");})
      .catch(res =>{this.$message.warning(res.message);})
    },

    toBlogUser(){
       location.href = '/blogDetail?userId=' + this.detail.blogUserId
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.root-info-pc{
  display: inline-block;
  width: 100%;
  font-size: 14px;
  padding: 16px;
  box-shadow: 0 2px 4px 0 #e2e2e2;
  margin-bottom: 8px;
  background-color: white;

  .user-info {
    .flex-center-start();

    .user-name{
      color: #000000;
      margin-bottom: 5px;
      margin-left: 12px;
      font-size: 15px;
      letter-spacing: 2px;
      font-weight: bold;
    }

    .user-code-year-box{
      .flex-center-center();
      height: 16px;
      border-radius: 0 8px 8px 0;
      background-color: #EBCDFF;
      margin-left: 15px;
    
      .code-year-img{
        height: 20px;
        width: 20px;
        margin-left: -4px;
      }

      .code-year{
        font-size: 12px;
        color: #622BD0;
        padding: 0 2px 0 2px;
        transform: scale(0.85);
        letter-spacing: 1px;
      }
    }
  }

  .blog-info {
    padding: 0 0 0px;
    .flex();
    flex-wrap: wrap;

    .info-item {
      width: 50%;
      .flex-center-start();
      margin: 24px 0 0;

      .info-title{
        color: #222226;
        font-weight: bold;
        letter-spacing: 1px;
        font-size: 14px;
      }

      .info-value{
        color: #4a4d52;
      }
    }
  }

  .focus-btn{
    margin-top: 24px;
  }
}

.root-info-mobile{
  display: none;
}

@media screen and (max-width: 1023px) {
  .root-info-pc{
    display: none;
  }

  .root-info-mobile{
    width: 100vw;
    font-size: 14px;
    padding: 10px;
    background-color: white;
    display: inline-block;

    .user-info {
      .flex();

      .user-name-box{
        height: 45px;
        .flex-start-between();
        flex-direction: column;

        .user-name-top{
          .flex-center-start();

          .user-name{
            color: #000000;
            margin-left: 12px;
            font-size: 15px;
            line-height: 15px;
            font-weight: bold;
          }

          .user-code-year-box{
            width: 52px;
            height: 12px;
            border-radius: 0 6px 6px 0;
            position: relative;
            .flex-center-start();
            background-color: #EBCDFF;
            margin-left: 15px;

            .code-year-img{
              height: 16px;
              width: 16px;
              margin-left: -4px;
            }

            .code-year{
              position: absolute;
              right: 0;
              bottom: 1px;
              font-size: 12px;
              color: #622BD0;
              line-height: 12px;
              padding: 0;
              transform: scale(0.7);
            }
          }         
        }

        .blog-info {
          padding: 0 0 0px;
          .flex();

          .info-item {
            .flex-center-start();
            margin: 0 2px 0 12px;    

            .info-title{
              color: #222226;
              letter-spacing: 1px;
              font-size: 12px;
            }

            .info-value{
              color: #4a4d52;
              font-size: 12px;
            }
          }
        }         
      }
    }

    .focus-btn{
      width: 80px;
      margin-top: 0dp;
      margin-left: 10px;
    }
  }
}
</style>
